<template>
  <div class="myTree">
    <van-tree-select @click-nav="changeItem" height="15rem" :items="categoryList" :main-active-index.sync="active">
      <template #content>
        <div>
          <img :src="currentCategory?.picUrl" alt="" style="width:100% ;">
          <p style="text-align: center;margin-top: 5px;">{{ currentCategory?.desc }}</p>
        </div>
        <van-grid :column-num="3">
          <van-grid-item v-for="(item, index ) in currentSubCategory" :key="item.id" :icon="item.picUrl" :text="item.name" @click="goList(item.id,index)">
          </van-grid-item>
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  name: 'MyTree',
  components: {
  },
  data () {
    return {
      active: 0,
      botherIndex: 0
    }
  },
  computed: {
    categoryList () {
      return this.$store.state.Classification.categoryList
    },
    currentCategory () {
      return this.$store.state.Classification.currentCategory
    },
    currentSubCategory () {
      return this.$store.state.Classification.currentSubCategory
    }
  },
  watch: {
    // 侦听到vuex中父组件是否数据请求完成，完成后再去子组件再去请求数据
    categoryList: {
      handler () {
        this.changeItem(0)
      }
    }
  },
  mounted () {

  },
  methods: {
    // 点击左侧导航栏
    changeItem (index) {
      this.$store.dispatch('Classification/getItemsData', index)
    },
    // 点击右侧每个宫格
    goList (id, index) {
      console.log(id, index)
      window.sessionStorage.setItem('categoryIds', JSON.stringify({ id, index }))
      // this.botherIndex = index
      // this.$store.dispatch('Classification/getCatetoryItemData', { id, index })
      // this.$store.dispatch('Classification/getCategoryListData', { id: id, page: 1, limit: 10 })
      this.$router.replace({ name: 'CategoryItem', query: { categoryId: id, page: 1, limit: 10 } })
    }
  }
}
</script>
<style scoped lang='scss'>
::v-deep .van-icon__image{
  width: 2em;
  height: 2em;
}
</style>
